<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/goods.css"/>
</head>
<body>
    <div id="app">
        <!--顶部导航栏-->
        <div class="layui-container">
            <div class="layui-row head-nav">
                <div class="layui-col-md1">
                    <img src="images/wopinla-logo.jpg" height="80px">
                </div>
                <div class="layui-col-md1 nav">
                    首页
                </div>
                <div class="layui-col-md1 nav">
                     数码3C
                </div>
                <div class="layui-col-md1 nav">
                    家用电器
                </div>
                <div class="layui-col-md1 nav">
                    服饰鞋包
                </div>
                <div class="layui-col-md1 nav">
                    食品饮料
                </div>
                <div class="layui-col-md1 nav">
                    美妆个护
                </div>
                <div class="layui-col-md1 nav">
                    家居生活
                </div>
                <div class="layui-col-md1 nav" @click="toCart">
                    <i class="layui-icon layui-icon-cart" style="font-size: 14px;font-weight: 700 "></i> 购物车
                </div>
                <div class="layui-col-md3">

                    <div class="layui-form-item" style="margin-bottom: 0px;margin-top: 21px; ">
                        <div class="layui-input-block" style="margin-left: 0;">
                            <input type="text"  placeholder="你在找什么" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="pay" v-if="hastopay">
            <div class="pay-header">
                <div class="pay-title">支付详情</div>
                <div class="cancel-pay" @click="hastopay = false">取消支付</div>
            </div>
            <div class="goodnum">共选择 1 类商品，总计 {{goodsnum}} 件</div>
            <div class="goodnum">总计：¥ {{allgoodsprice}}</div>
            <div class="jiesuan-btn" style="margin-top: 20px" @click="gotohadpay">支付</div>
        </div>

        <!-- 商品信息页面-->
        <div class="goods-info">
            <div class="goods-image">
                <img src="images/wopinla-logo.jpg" width="390" height="390" id="goodslogo"/>
            </div>
            <div class="detailedinfo">
                <div class="goods-name">{{goodsname}}</div>
                <div class="goods-description">{{goodstag}}</div>

                <div class="red-price">
                    <div class="yellow-price">¥ {{goodsprice}}</div>
                </div>
                <div class="num-check">
                    <div class="num-check-tag">数量选择</div>
                    <div class="check-num">
                        <div style="font-size: 20px;color: #666666" @click="goodsnum = goodsnum - 1 < 0 ? 0 : goodsnum - 1"><i class="layui-icon layui-icon-subtraction" style="font-size: 15px; color: #333333;"></i></div>
                        <div style="font-size: 16px" >{{goodsnum}}</div>
                        <div style="font-size: 20px;color: #666666" @click="goodsnum = goodsnum + 1"><i class="layui-icon layui-icon-addition" style="font-size: 15px; color: #333333;"></i></div>
                    </div>
                </div>
                <div class="collect-buy">
                    <div class="buynow" @click="hastopay = true">立即购买</div>
                    <div class="collect" @click="collect" id="collect-btn">
                        <span v-if="!hascollect">
                            <i class="layui-icon layui-icon-star" style="font-size: 14px; color: #333333;"></i>  收藏
                        </span>
                        <span v-if="hascollect">
                            <i class="layui-icon ayui-icon-star-fill" style="font-size: 14px; color: #333333;"></i>  已收藏
                        </span>
                    </div>
                </div>

                <div class="add-cart" @click="addCart">
                    <span v-if="!hasadd">
                        <i class="layui-icon layui-icon-cart" style="font-size: 14px; color: #333333;"></i>  加入购物车
                    </span>
                    <span v-if="hasadd">
                        <i class="layui-icon layui-icon-cart" style="font-size: 14px; color: #333333;"></i>  已加入购物车
                    </span>
                </div>
            </div>

        </div>
        <!--评论板块-->
        <div class="comment-header">用户评论</div>

        <div class="comment" v-for="comment in commentlist">
            <div class="comment-user">
                <div class="user-icon">
                    <img src="images/user-icon.jpg" height="58">
                </div>
                <div class="comment-info">
                    <div class="username">{{comment.username}}</div>
                    <div class="comment-time">{{comment.time}}</div>
                </div>
            </div>
            <div class="comment-text">{{comment.content}}</div>
            <!--
            <div class="comment-imgs">
                <div class="comment-img comment-first-img">
                    <img src="images/img104.jpg" height="180">
                </div>
                <div class="comment-img">
                    <img src="images/img106.jpg" height="180">
                </div>
                <div style="clear: both"></div>
            </div>
            -->
        </div>

        <!--更多评论-->
        <div class="more-comment">
            <div class="more-comment-btn">更多 评论 ➞</div>
        </div>
        <!-- 推荐-->
        <div class="tuijian-title">类似商品</div>
        <div class="tuijian-list">
            <div class="tuijian">
                <div class="tuijian-img"><img src="images/shoujike.jpg" width="100%"></div>
                <div class="tuijian-tag">新品</div>
                <div class="tuijian-name">坚果 Pro 3 足迹保护套</div>
                <div class="tuijian-info">这一次，两面都有好故事</div>
                <div class="tuijian-price">¥ 44</div>
            </div>
            <div class="tuijian">
                <div class="tuijian-img"><img src="images/jingshuiqi.jpg" width="100%"></div>
                <div class="tuijian-tag">新品</div>
                <div class="tuijian-name">飞利浦 空气净化器</div>
                <div class="tuijian-info">广域净化 灵智感应 360°循环风路设计</div>
                <div class="tuijian-price">¥ 2799</div>
            </div>
            <div class="tuijian">
                <div class="tuijian-img"><img src="images/wuxian.jpg" width="100%"></div>
                <div class="tuijian-tag">新品</div>
                <div class="tuijian-name">公牛无线充电器</div>
                <div class="tuijian-info">自动识别可无线充电手机</div>
                <div class="tuijian-price">¥ 109</div>
            </div>
            <div class="tuijian">
                <div class="tuijian-img"><img src="images/erji.jpg" width="100%"></div>
                <div class="tuijian-tag">新品</div>
                <div class="tuijian-name">Smartisan 半入耳式耳机</div>
                <div class="tuijian-info">经典配色、专业调音、高品质麦克风</div>
                <div class="tuijian-price">¥ 39</div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="height: 200px;"></div>
</body>
<script src="js/goods.js"></script>
</html>